
<template>
  <div class="course-page">
    <h4>视频播放</h4>
    <br />
    <br />
    <div class="player-demo">

      <div class="player-content">
        <ibd-video-player
          :resourcesId="resourcesPolyvId"
          :resources-type="resourcesType"
        >
        </ibd-video-player>

      </div>
      <!-- <div class="player-content">
        <ibd-video-player
          :resourcesId="resourcesIbdId"
          :resources-type="resourcesType"
        >
        </ibd-video-player>
      </div> -->
    </div>
    <br />
    <el-button @click="changePolyvVid">更换视频1</el-button>
    <el-button @click="changeIbdVid">更换视频2</el-button>
  </div>
</template>

<script>
export default {
  name: 'appCourse',
  data() {
    return {
      indexNum: 1,
      resourcesPolyvId: null,
      resourcesIbdId: null,
      resourcesType: null,
      index: 1,
      dataList: [
        '812a792458622905ee4244c9bab5c318_8',
        '812a792458f94317f670f48ac0a2ad38_8',
        '812a792458db8ae8ffe188158d935512_8',
        '812a7924581fac50842e5761d23c2a9d_8',
        '812a7924581fac50842e5761d23c2a9d_8',
        '812a792458d4152f09f1093d23c65a93_8',
        '812a792458a94b53a20fb444771f0be3_8',
      ],
    };
  },
  mounted() {},
  methods: {
    changePolyvVid() {
      this.resourcesPolyvId = 2;
      this.resourcesType = 'polyv';
    },
    changeIbdVid() {
      this.resourcesIbdId = this.index === 1 ? 2 : 3;
      this.resourcesType = 'mooc';
    },
  },
};
</script>

<style  lang="scss" scoped>
.course-page {
  width: 100%;
  margin: 20px;
  margin: 0 atuo;
  h4 {
    text-align: center;
  }
  .player-demo {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 400px;
    border: 1px dashed #ccc;
  }
  .player-content {
    width: 700px;
    height: 400px;
    margin: 0 auto;
    box-sizing: border-box;
    border: 1px dashed #ccc;
    display: flex;
  }
}
</style>
